<!--  -->
<template>
    <div class="px-80 pt-5">
        <div class="text-3xl mb-3">下载 PsdLink®</div>
        <p>以您喜欢的方式下载 PsdLink。</p>
        <div class="LinkTabs_tabsList__mXcXu">
            <div class="LinkTabs_tabsTrigger__ZU5C4" data-state="active" href="/zh-cn/download/prebuilt-installer">
                预构建安装程序</div>
        </div>
        <div class="LinkTabs_tabsSelect__aTzPI">
            <button class="btn primary" @click="downLoad('ps')">下载PS插件</button>
            <button class="btn normal" @click="downLoad('web')">下载PSDLink_网页版</button>
            <button class="btn normal" @click="downLoad('api')">下载PSDLink_API</button>
        </div>
    </div>
</template>

<script setup lang="ts">
import { useCounterStore } from '@/stores/counter';

const { downLoad } = useCounterStore()


</script>
<style scoped lang="less">
.LinkTabs_tabsList__mXcXu {
    margin-bottom: 1.5rem;
    margin-top: 2.5rem;
    display: flex;
    gap: 0.5rem;
    border-bottom-width: 1px;
    --tw-border-opacity: 1;
    border-bottom-color: rgb(233 237 240 / var(--tw-border-opacity));
    font-family: var(--font-open-sans);
}

.LinkTabs_tabsList__mXcXu:is([data-theme='dark'] *) {
    --tw-border-opacity: 1;
    border-bottom-color: rgb(85 96 102 / var(--tw-border-opacity));
}

@media not all and (min-width: 670px) {
    .LinkTabs_tabsList__mXcXu {
        display: none;
    }
}

.LinkTabs_tabsList__mXcXu .LinkTabs_tabsTrigger__ZU5C4 {
    border-bottom-width: 2px;
    border-bottom-color: transparent;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    padding-bottom: 11px;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: #2a82e4;
}

.LinkTabs_tabsList__mXcXu .LinkTabs_tabsTrigger__ZU5C4:is([data-theme='dark'] *) {
    --tw-text-opacity: 1;
    color: #2a82e4;
}

.LinkTabs_tabsList__mXcXu .LinkTabs_tabsTrigger__ZU5C4[data-state='active'] {
    --tw-border-opacity: 1;
    border-bottom-color: #2a82e4;
    --tw-text-opacity: 1;
    color: #2a82e4;
}

.LinkTabs_tabsList__mXcXu .LinkTabs_tabsTrigger__ZU5C4[data-state='active']:is([data-theme='dark'] *) {
    --tw-border-opacity: 1;
    border-bottom-color: #2a82e4;
    --tw-text-opacity: 1;
    color: #2a82e4;
}


.LinkTabs_tabsSelect__aTzPI>span {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    display: none;
    width: 100%;
}
</style>
